<template>
    <div v-show="total">
        <input type="checkbox" :checked="isAllChecked" @change="checkAll"/>
        已完成 {{doneCount}} / {{todos.length}} 
        <button >删除选中</button>
    </div>
</template>

<script>
    export default {
        name : "MyFooter",
        props:["todos","checkAllTodo"],
        computed:{
            total(){
                return this.todos.length
            },
            doneCount(){
                return this.todos.reduce((count,todo) => count+(todo.done?1:0) ,0 )
            },
            // 计算属性允许套娃
            isAllChecked(){
                return this.total === this.doneCount && this.total > 0 
            }
        },
        methods:{
            checkAll(e){
                this.checkAllTodo(e.target.checked)
            }
        }
    }
</script>

<style scoped>
    
</style>